 
 <template>
  <div id="app">
    <div class="container">
      <!-- 第四联 -->
    <template v-for="item in listInfo"    >
      <div class="page-break"></div>
      <div class="header">
        <h2>{{item.title}}</h2>
      </div>
      <div class="admin-info">
        <div class="form-row">
          <div class="form-col">
            <label>行政区划代码
              <div class="grid-container">
                <div v-for="(digit, index) in formData.regionCode" :key="index" class="grid-item">{{ digit }}</div>
              </div>
            </label>
            <label style="float: right;">编号
              <div class="grid-container">
                <div v-for="(char, index) in formData.certificateId" :key="index" class="grid-item">{{ char }}</div>
              </div>
            </label>
          </div>
        </div>
      </div>
      <div class="table-wrapper">
        <div class="vertical-label">{{ item.left }}</div>
        <table>
          <tr>
            <th>死者姓名</th>
            <td><div class="form-field">{{ formData.deceasedName }}</div></td>
            <th>性别</th>
            <td><div class="form-field">{{ formData.gender }}</div></td>
            <th>民族</th>
            <td><div class="form-field">{{ formData.ethnicity }}</div></td>
            <th>国家或地区</th>
            <td><div class="form-field">{{ formData.country }}</div></td>
            <th>年龄</th>
            <td><div class="form-field">{{ formData.age }}</div></td>
          </tr>
          <tr>
            <th>身份证件<br>类别</th>
            <td><div class="form-field">{{ formData.idType }}</div></td>
            <th>证件号码</th>
            <td colspan="2"><div class="form-field">{{ formData.idNumber }}</div></td>
            <th>常住地址</th>
            <td colspan="4"><div class="form-field">{{ formData.registeredAddress }}</div></td>
          </tr>
          <tr>
            <th>出生日期</th>
            <td><div class="form-field">{{ formatDate(formData.birthDate) }}</div></td>
            <th>死亡日期</th>
            <td colspan="2"><div class="form-field">{{ formatDateTime(formData.deathDate, formData.deathTime) }}</div></td>
            <th>死亡地点</th>
            <td colspan="4"><div class="form-field"> {{ formData.deathLocation }}</div></td>
          </tr>
          <tr>
            <th>死亡原因</th>
            <td colspan="3"><div class="form-field">{{ formData.causeA }}</div></td>
            <th>家属姓名</th>
            <td colspan="2"><div class="form-field">{{ formData.familyName }}</div></td>
            <th>联系电话</th>
            <td colspan="2"><div class="form-field">{{ formData.familyPhone }}</div></td>
          </tr>
          <tr>
            <th>家属住址或单位</th>
            <td colspan="3"><div class="form-field">{{ formData.familyWorkplace }}</div></td>
            <th>医师签名</th>
            <td colspan="2"><div class="form-field">{{ formData.doctorSignature }}</div></td>
            <th>民警签名</th>
            <td colspan="2"><div class="form-field">{{ formData.investigatorSignature }}</div></td>
          </tr>
          <tr>
            <td colspan="5">
              <div class="form-field">医疗卫生机构盖章</div>
              <span class="year">年月日</span>
            </td>
            <td colspan="5">
              <div class="form-field">派出所意见(盖章)</div>
              <span class="year">年月日</span>
            </td>
          </tr>
        </table>
      </div>
      <!-- 备注信息 -->
      <div class="dashed-border">
        <p style="font-size: 10px; padding-top: 5px;">{{ item.remark }}</p>
      </div>
  </template>
      <!-- 操作按钮 -->
      <div class="controls">
        <button class="action-btn print-btn" @click="printCertificate">打印证明书</button>
        <button class="action-btn reset-btn"  @click="toPage('print1',{id:formData.id})">返回上一页</button>
      </div>
    </div>
  </div>
</template>
  <script>
  import * as proofApi from "@/api/deathProof"
     export default {
        name: "print1",
      data() {
        return {
          formData:{},
          formData2: {
            province: '湖南省',
            city: '长沙市',
            county: '芙蓉区',
            regionCode: '430102',
            certificateId: '20250620001',
            deceasedName: '张三',
            gender: '男',
            ethnicity: '汉族',
            country: '中国',
            idType: '身份证',
            idNumber: '43010219800101001X',
            age: '75',
            maritalStatus: '已婚',
            birthDate: '1950-01-01',
            education: '高中',
            occupation: '退休工人',
            deathDate: '2025-06-15',
            deathTime: '14:30',
            deathLocation: '家中',
            pregnancy: '否',
            registeredAddress: '湖南省长沙市芙蓉区解放路100号',
            residentialAddress: '湖南省长沙市芙蓉区解放路100号',
            workplace: '长沙机械厂（已退休）',
            familyName: '张四',
            familyPhone: '13800138000',
            familyWorkplace: '长沙百货公司',
            causeA: '急性心肌梗死',
            causeB: '冠状动脉粥样硬化性心脏病',
            causeC: '高血压病',
            causeD: '动脉粥样硬化',
            illnessDurationA: '立即',
            illnessDurationB: '5年',
            illnessDurationC: '10年',
            illnessDurationD: '15年',
            otherDisease: '2型糖尿病',
            otherDuration: '15年',
            diagnosisBasis: '临床+理化',
            diagnosisUnit: '三级医院',
            doctorSignature: '李医生',
            institution: '长沙市第一人民医院',
            issueDate: '2025-06-16',
            rootCause: '冠状动脉粥样硬化性心脏病',
            icdCode: 'I25.1',
            medicalHistory: '患者有高血压病史15年，糖尿病史10年，冠心病史5年。近一周出现胸闷、气促症状，未及时就医。',
            investigatorName: '张四',
            relationship: '父子',
            investigatorPhone: '13800138000',
            investigatorAddress: '湖南省长沙市芙蓉区解放路100号',
            deathInference: '根据病史及症状，推断为心源性猝死。',
            investigatorSignature: '王调查员',
            signatureDate: '2025-06-17'
          },
          listInfo:[
            {title:'居民死亡医学证明（推断）书',left:'第二联 公安部门保存',remark:'注：①死者家属持此联到公安机关办理户籍注销手续；②无医师及民警签字、医疗卫生机构及派出所盖章无效。'},
            {title:'居民死亡医学证明（推断）书',left:'第三联 死者家属保存',remark:'注：①死者家属持此联到公安机关签章；②无医师及民警签字、医疗卫生机构及派出所盖章无效；③死于救治机构以外的死亡原因系死后推断。'},
            {title:'居民死亡殡葬证',left:'第四联 殡葬管理部门保存',remark:'注：①死者家属持此证到殡仪馆办理尸体火化手续；②死于救治机构，医师签字及医疗卫生机构盖章有效；死于非救治机构，医师及民警签字、医疗卫生机构及派出所盖章有效。'},

          ]
        };
      },
      mounted() {
            if(this.$route.query.id)
                proofApi.get(this.$route.query.id).then(p=>{
                    this.formData=p.data
                    this.formData.investigatorSignature=''
                })
            },
      computed: {
        regionCodeDigits() {
          return this.formData.regionCode ? this.formData.regionCode.split('') : ['', '', '', '', '', ''];
        },
        certificateIdChars() {
          if (!this.formData.certificateId) return Array(18).fill('');
          
          // 将证书ID拆分为字符数组
          const chars = this.formData.certificateId.split('');
          // 确保有足够的位置（12位ID + 横线 + 5位空格）
          const result = [...chars.slice(0, 12), '-', ...Array(5).fill('')];
          return result.slice(0, 18);
        }
      },
      methods: {
        toPage(path,query){
                    
                       this.$router.push({
                        path:path,
                        query:query
                       }) 
                },
        // 格式化日期为中文格式
        formatDate(dateString) {
          if (!dateString) return '';
          const date = new Date(dateString);
          return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
        },
        
        // 格式化日期时间为中文格式
        formatDateTime(dateString, timeString) {
          if (!dateString) return '';
          const date = new Date(dateString);
          const time = timeString || '';
          return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${time}`;
        },
        
        // 格式化日期为"年月日"格式（用于印章）
        formatYearMonthDay(dateString) {
          if (!dateString) return '年月日';
          const date = new Date(dateString);
          return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
        },
        
        // 打印功能
        printCertificate() {
          window.print();
        },
        
        // 返回编辑
        backToEdit() {
          alert('返回编辑页面');
          // 实际项目中可能触发路由跳转或事件
        }
      }
    };
  </script>

  <style scoped>
    /* 全局样式优化 */
    * {
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: "SimSun", "宋体", serif;
       background: linear-gradient(135deg, #e0f0ff, #f5f9ff);
      color: #000;
      padding: 20px;
      line-height: 1.6;
    }
    
    .container {
      max-width: 1000px;
      margin: 0 auto;
      background: white;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      padding: 30px;
      position: relative;
    }
    
    /* 标题区域样式 */
    .header {
      text-align: center;
      margin-bottom:5px;
	  font-weight: bold;
    }
    
    .header h2{
      margin: 15px 0 10px 0 ;
	  font-weight: bold;
	  font-size: 24px;
	  font-family: Georgia, 'Times New Roman', Times, serif;
    }
    
    .title-note {
      font-size: 12px;
      color: #666;
      margin-top: 5px;
    }
    
    /* 行政区域样式优化 */
    .admin-info {
/*      margin-bottom: 15px */;
      font-size: 12px;
    }
    
    .form-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    
    .form-col {
      flex: 1;
    }
    
    .form-col label {
      display: inline-block;
    }
    
    .form-col span {
      font-weight: bold;
      display: inline-block;
      min-width: 40px;
      text-align: center;
      border-bottom: 1px solid #333;
      /* margin: 0 5px; */
      /* padding: 0 5px; */
    }
    
    /* 表格样式优化 */
    table {
      width: 100%;
      border-collapse: collapse;
      /* margin-bottom: 15px; */
      table-layout: fixed;
      font-size: 12px;
    }
    
    table, th, td {
      border: 1px solid #333;
      /* padding: 1px 5px; */
    }
    
    th {
/*      background-color: #f5f5f5 */;
      text-align: center;
      font-weight: normal;
      line-height: 2;
    }
    
    td {
      vertical-align: middle;
      /* line-height: 1.7; */
    }
    
    .form-field {
      min-height: 28px;
      display: flex;
      align-items: center;
      padding: 0 5px;
    }
	
	.year{
		letter-spacing: 30px;
		display: block;
		text-align: right;
	}
    
    /* 部分标题样式 */
    .section-title {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
    }
    
    .section-title::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 10%;
      width: 80%;
      height: 1px;
      background: linear-gradient(to right, transparent, #333, transparent);
    }
    
    /* 备注区域样式 */
    .notes {
      padding: 5px;
      border-bottom:1px dashed #000;
      font-size: 12px;
      line-height: 1.8;
    }
    
    .notes p {
      margin-bottom: 5px;
    }
    
    /* 按钮区域样式 */
    .controls {
      margin: 15px 0 15px;
      display: flex;
      justify-content: center;
      gap: 20px;
    }
    
    button {
      padding: 8px 25px;
      background: #2c6aa0;
      color: white;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      font-size: 14px;
      font-family:  "宋体", "SimSun",serif;
      transition: background 0.3s;
      box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    }
    
  
    
    /* 打印样式优化 */
    @media print {
      @page {
		    /* 基础边距设置 - 适用于大多数文档 */
		    /*margin:25mm 0mm 1mm 10mm;  上下左右统一15毫米边距 */
		    
		    /* 也可以单独设置各边距 */
		     margin-top: 0mm;
		     margin-bottom: 0mm;
		     margin-left: 10mm;
		     margin-right: 10mm; 
		       
		   
		    /* 横向打印 */
		    /* size: A4 landscape; */
		  }
      body {
        padding: 0;
        background: white;
      }
      
      .container {
        box-shadow: none;
        padding: 15px;
        max-width: 100%;
      }
      
      .controls {
        display: none;
      }
      
      button {
        display: none;
      }
      
      .notes {
        border: none;
        background-color: transparent;
        padding: 5px 0;
      }
    }
    
    /* 移动端适配 */
    @media (max-width: 768px) {
      .container {
        padding: 15px;
      }
      
      .form-row {
        flex-direction: column;
      }
      
      .controls {
        flex-direction: column;
        align-items: center;
      }
    }
    
    /* 特殊单元格样式 */
    .signature-area {
      padding: 10px;
      min-height: 80px;
    }
    
    .signature-line {
      float: right;
      padding: 0px 20px 0 0;
    }
    
    /* 增强可读性 */
    tr:nth-child(even) {
      /* background-color: #fafafa; */
    }
    
    td:empty::after {
      content: " ";
      display: inline-block;
      width: 100%;
    }
	/* 新增：第一联标签样式 */
	    .vertical-label {
	      position: absolute;
	      left: -20px;
	      top: 50%;
	      transform: translateY(-50%);
	      writing-mode: vertical-lr;
	      text-orientation: upright;
	      font-size: 12px;
	      white-space: nowrap;
		  letter-spacing: 5px;
		  
	    }
	    
	    /* 新增：表格容器样式 */
	    .table-wrapper {
	      position: relative;
	      margin-top: 5px;
	    }
		/* 新增：格子样式 */
		    .grid-container {
		      display: inline-flex;
		      gap: 2px;
		      margin-left: 5px;
		      vertical-align: middle;
		    }
		    
		    .grid-item {
		      width: 15px;
		      height: 15px;
		      border: 1px solid #aaa;
		      text-align: center;
		      line-height: 15px;
		      display: inline-block;
		    }
			.dashed-border {
				font-size: 10px;
			  padding: 5px; /* 为底部边框留出空间 */
			  border-bottom: 1px dashed #000;
			}
      .actions {
			    display: flex;
			    justify-content: center;
			    gap: 20px;
/* 			    background: #f9fbfd;
			    border-bottom: 1px solid #eaeaea; */
			}
			
			.action-btn {
			    padding: 12px 30px;
			    border: none;
			    border-radius: 30px;
			    font-weight: 500;
			    cursor: pointer;
			    display: flex;
			    align-items: center;
			    gap: 8px;
			    transition: all 0.3s ease;
			    font-size: 16px;
			    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
				
			}
			
			.print-btn {
			    background: linear-gradient(135deg, #ff9800, #f57c00);
			    color: white;
			}
			
			.reset-btn {
			    background: linear-gradient(135deg, #607d8b, #455a64);
			    color: white;
			}
			
			.submit-btn {
			    background: linear-gradient(135deg, #28a745, #218838);
			    color: white;
			}
			
			.action-btn:hover {
			    transform: translateY(-3px);
			    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
			}
			
  </style>
